<template>
	<div>
		<div class="item_sousuo_div">
			<div @click="quxiao" class="tuichu_div">
				<img src="../assets/icon_info.png" />
			</div>
			<div class="inpt_div">
				<img src="../assets/icon_serach1.png" />
				<input type="text" placeholder="尖椒" />
			</div>
		</div>
		<div v-for="item in datas">
			<div @click="xiangqing" class="product_div_bottom">
				<div class="home_div_bottom_bottom">
					<img src="../assets/超市.png" />
					<div class="home_bottom_text">
						<div class="home_bottom_text_first">{{item.Name}}</div>
						<div class="home_bottom_text_second">
							<span>{{item.txt1}}</span>
							<span>{{item.txt2}}</span>
							<span>{{item.txt3}}</span>
						</div>
						<div class="home_bottom_text_third">{{item.txt4}}</div>
					</div>
				</div>
				<div class="img_span_span">
					<div v-for="item1 in item.datalist" class="item_span_div">
						<img :src="item1.img" />
						<div class="p_item_p_div">
							<p>{{item1.name}}</p>
							<p>￥{{item1.price}}</p>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				datas: [{
						"Name": "沃尔玛",
						"txt1": "月售1万+",
						"txt2": "起送￥0",
						"txt3": "基础运费￥5",
						"txt4": "VIP尊享满89元减4元运费券（每月3张)",
						datalist: [{
							img: require("../assets/icon_order.png"),
							"name": "番茄250g/份",
							price: 33.6
						}, {
							img: require("../assets/icon_order.png"),
							"name": "超甜橙子250g/份",
							price: 6.6
						}, {
							img: require("../assets/icon_order.png"),
							"name": "超甜草莓250g/份",
							price: 9.9
						}, {
							img: require("../assets/icon_order.png"),
							"name": "超甜西瓜250g/份",
							price: 18.8
						}]
					},
					{
						"Name": "京东7FRESH生鲜",
						"txt1": "月售1万+",
						"txt2": "起送￥300",
						"txt3": "全免运费",
						"txt4": "VIP尊享满89元减4元运费券（每月3张)",
						datalist: [{
							img: require("../assets/icon_order.png"),
							"name": "番茄250g/份",
							price: 33.6
						}, {
							img: require("../assets/icon_order.png"),
							"name": "超甜橙子250g/份",
							price: 6.6
						}, {
							img: require("../assets/icon_order.png"),
							"name": "超甜草莓250g/份",
							price: 9.9
						}, {
							img: require("../assets/icon_order.png"),
							"name": "超甜西瓜250g/份",
							price: 18.8
						}]
					},
					{
						"Name": "百果园",
						"txt1": "月售1万+",
						"txt2": "起送￥30",
						"txt3": "全免运费",
						"txt4": "VIP尊享满89元减4元运费券（每月3张)",
						datalist: [{
							img: require("../assets/icon_order.png"),
							"name": "番茄250g/份",
							price: 33.6
						}, {
							img: require("../assets/icon_order.png"),
							"name": "超甜橙子250g/份",
							price: 6.6
						}, {
							img: require("../assets/icon_order.png"),
							"name": "超甜草莓250g/份",
							price: 9.9
						}, {
							img: require("../assets/icon_order.png"),
							"name": "超甜西瓜250g/份",
							price: 18.8
						}]
					},
				],
			}
		},
		methods: {
			quxiao(){
				this.$router.push('/search_list')
			},
			xiangqing(){
				this.$router.push('/shopdetail')
			}
		}
	}
</script>

<style scoped>
	.p_item_p_div :nth-child(1){
		font-size: 14px;
	}
	.p_item_p_div :nth-child(2){
		font-size: 16px;
		color: red;
	}
	.img_span_span {
		margin-top: 30;
		margin-left: 20%;
		padding-bottom: 10px;
		border-bottom: 1px solid #F1F1F1;
		display: flex;
		justify-content: space-between;
	}

	.item_span_div {
		margin-left: 8px;
		margin-right: 8px;
	}

	* {
		margin: 0;
		padding: 0;
	}

	.home_div_bottom_bottom {
		margin-top: 14px;
		text-align: left;
		margin-left: 18px;
		display: flex;
		justify-content: start;
	}

	.home_div_bottom_bottom img {
		height: 56px;
		width: 56px;
	}

	.home_div_bottom_bottom .home_bottom_text {
		margin-left: 16px;
	}

	.home_div_bottom_bottom .home_bottom_text .home_bottom_text_first {
		font-family: PingFangSC-Regular;
		font-size: 16px;
		color: #333333;
	}

	.home_div_bottom_bottom .home_bottom_text .home_bottom_text_second {
		font-family: PingFangSC-Regular;
		font-size: 13px;
		color: #333333;
		display: flex;
		justify-content: space-between;
		margin-top: 8px;
	}

	.home_div_bottom_bottom .home_bottom_text .home_bottom_text_third {
		font-family: PingFangSC-Regular;
		font-size: 13px;
		color: #E93B3B;
		margin-top: 8px;
		padding-bottom: 12px;
	}

	.product_div_bottom {
		margin-top: 24px;
	}

	.item_sousuo_div {
		display: flex;
		justify-content: space-between;
	}

	.inpt_div {
		background: #F5F5F5;
		margin-left: 20px;
		margin-right: 20px;
		height: 40px;
		margin-top: 15px;
		display: flex;
		flex: 7.5;
		justify-content: center;
		align-items: center;
		line-height: 22px;
		border-radius: 16px;
		padding-left: 15px;
		padding-right: 15px;
	}

	.inpt_div img {
		height: 16px;
		width: 16px;
	}

	.tuichu_div img {
		height: 20px;
		width: 10px;
		margin-top: 26px;
		margin-left: 16px;
	}

	.inpt_div input {
		flex: 1;
		height: 30px;
		border-radius: 16px;
		padding-left: 15px;
		border: none;
		background: #F5F5F5;
		font-size: 14px;
		outline: none;
	}
</style>